<template>
  <div>
    <!-- 对于这些原生 html 元素, 会被 vue 重新包装, 会自动给他们添加一个原生的事件 -->
    <h2 @click="putH2">father组件</h2>
    <!-- @事件名.native="函数名" -->
    <!-- native vue 将当前的组件, 看做原生的元素, 给你自动添加一个 click 原生事件 -->
    <child-com @click="response">11</child-com>
  </div>
</template>

<script>
import ChildCom from './ChildCom.vue'
export default {
  components: { ChildCom },
  props: {
    num: {
      required: true,
      type: Number
      // default: 0
    },
    // 如果父向子传值是复杂数据类型的时候, 默认值不能是固定的地址
    // 要和 data 一样, 用一个函数返回一个对象 (新地址)
    obj: {
      type: Object,
      // required: true
      default: () => {}
    }
  },
  data() {
    return {

    }
  },
  methods: {
    // h2 点击事件
    putH2() {
      console.log(222)
    },
    // 父组件接收到子组件抛出的事件后, 执行事件绑定的函数
    response() {
      console.log('抛出事件获取成功')
    }
  }
}
</script>

<style>

</style>
